<template>
  <div class="cloud">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 云圈动态+ 图片+视频 -->
      <div v-for="(item, index) in clouds" :key="index" class="vediobox">
        <div class="vedios" ref="vedios">
          <h2 class="title">#{{ item.name }}#</h2>
          <!--  图片 -->
          <img
            ref="coverimg"
            class="coverimg"
            :src="item.cover"
            alt=""
            @click="loadmv(item.id, index)"
          />
          <!--  关闭视频 -->
          <span class="onoff" ref="onoff" @click="onoff(index)">关闭</span>
        </div>
        <!-- 视频 -->
        <video class="vedio" :src="url" controls></video>
        <!-- 点赞 评论  分享-->
        <div class="footer">
          <van-icon name="share-o" />
          <span class="shareCount">{{ shareCount[index] }}</span>
          <van-icon name="chat-o" />
          <span class="commentCount">{{ commentCount[index] }}</span>
          <van-icon name="good-job-o" />
          <span class="likedCount">{{ likedCount[index] }}</span>
        </div>
      </div>
    </van-pull-refresh>
    <div style="height: 3rem"></div>
  </div>
</template>

<script>
import { getCloudAPI, getcommentAPI, getCloudmvAPI } from "../../../api/focus";
import { Toast } from "vant";
export default {
  name: "cloud",
  data() {
    return {
      clouds: [],
      ids: [],
      mvId: "",
      //下拉刷新
      isLoading: false,
      count: 0,
      //转发
      shareCount: [],
      //评论
      commentCount: [],
      //点赞
      likedCount: [],
      //视频
      url: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    this.getClouud();
  },
  mounted() {},
  methods: {
    onClick() {
      console.log(1);
    },
    async getClouud() {
      let offset = parseInt(Math.random() * 20);
      const res = await getCloudAPI({ limit: 10, offset });
      console.log(666, res.data);
      this.clouds = res.data;
      this.clouds.forEach((v) => {
        console.log(v);
        this.ids.push(v.artistId);
      });
      this.ids.forEach(async (v) => {
        console.log(v);
        const res2 = await getcommentAPI({ mvid: v });
        console.log(res2);
        console.log(res2.commentCount); //0
        this.commentCount.push(res2.commentCount);
        this.likedCount.push(res2.likedCount);
        this.shareCount.push(res2.shareCount);
      });
    },
    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    //点击图片加载视频
    async loadmv(id, index) {
      const res = await getCloudmvAPI(id);
      console.log(res);
      console.log(index);
      this.url = res.data.url;
      //   this.$refs.vedio.style.display = "block";
      //   this.$refs.coverimg.style.display = "none";
      //   this.$refs.onoff.style.display = "block";
      document.querySelectorAll(".vedio")[index].style.display = "block";
      document.querySelectorAll(".coverimg")[index].style.display = "none";
      document.querySelectorAll(".onoff")[index].style.display = "block";
    },
    //关闭视频
    onoff(index) {
      document.querySelectorAll(".vedio")[index].style.display = "none";
      document.querySelectorAll(".coverimg")[index].style.display = "block";
      document.querySelectorAll(".onoff")[index].style.display = "none";
      document.querySelectorAll(".vedio")[index].pause();
    },
  },
};
</script>

<style scoped>
.cloud {
  margin: 10px;
  background-color: #f3f3f3;
}
.cloud h2 {
  color: #6c8099;
  line-height: 2;
}
img {
  width: 300px;
  display: block;
  margin: 5px 10px;
}
video {
  width: 300px;
  display: none;
  margin: auto;
}
.title {
  font-style: 16px;
  margin-bottom: 15px;
  color: #6c8099;
  line-height: 30px;
}
.footer {
  padding: 10px;
  font-size: 12px;
  color: #606060;
}
.shareCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.commentCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.likedCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.vedios {
  position: relative;
}
.onoff {
  position: absolute;
  color: #fff;
  right: 40px;
  top: 110px;
  padding: 0;
  display: none;
  z-index: 999999999999;
}
.vediobox {
  margin-bottom: 20px;
}
</style>
